@extends('owner.base')
@section('content')
    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief" style="">
        <ul class="layui-tab-title">
            <li class="layui-this">便捷发送短信</li>
        </ul>
        <div class="layui-card layui-tab-content" style="">
            <div class="layui-card-body layui-tab-item layui-show">

                <div class="layui-form-item">
                    <label for="" class="layui-form-label">选择手机号</label>

                </div>
                <table class="layui-table layui-form" id="tree-table" lay-size="sm"></table>


                <div class="layui-form-item">
                    <label for="" class="layui-form-label">群发内容</label>
                    <div class="layui-input-block">
                            <textarea id="msg" class="layui-textarea" name="description" cols="30" rows="3"
                            ></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" id="sendMsg" lay-filter="formDemo">发 送</button>
                    </div>
                </div>
                <input type="hidden" id="data-form"></input>
            </div>

        </div>
    </div>

@endsection

@section('script')
    <script type="text/javascript">
        $('body').on('click', '#sendMsg', function () {

            var phone = $("#phone").val();
            var msg = $("#msg").val();
            if (phone.length <= 1) {
                layer.msg("手机号必须填写");
                return false;
            }
            phone = phone.replace("，", ",");
            var preg = /^1[3578][0-9]{9}(,1[3578][0-9]{9})*$/;
            var arr_count = phone.match(preg);
            if (arr_count == null) {
                layer.msg("手机号格式有误", {icon: 5});
                return false;
            }
            if (msg.length <= 1) {
                layer.msg("发送消息必须填写", {icon: 5});
                return false;
            }
            $.post('/sendmany', {'phone': phone, 'msg': msg}, function (data) {
                layer.msg(data.msg, {icon: 6});
            }, 'json')
        })
        ;

    </script>
    <script>
        layui.use(['treeTable', 'layer', 'code', 'form'], function () {
            var o = layui.$,
                form = layui.form,
                layer = layui.layer,
                treeTable = layui.treeTable;
            // 直接下载后url: './data/table-tree.json',这个配置可能看不到数据，改为data:[],获取自己的实际链接返回json数组
            var re = treeTable.render({
                elem: '#tree-table',
                // url: '{{route('owner.driver.getdrivermail')}}',
                data: [{"id": 1, "pid": 0, "title": "\u597d\u670b\u6709"}],
                icon_key: 'title',
                is_checkbox: true,
                treeSpid: 0,
                treePidName: 'pid',
                width: 100,
                height: 200,
                checked: {
                    key: 'id',
                    //data: [0, 1, 4, 10, 11, 5, 2, 6, 7, 3, 8, 9],
                },
                end: function (e) {
                    form.render();
                },
                cols: [
                    {
                        key: 'title',
                        title: '标签名称',
                        width: '100px',
                        template: function (item) {
                            if (item.level == 0) {
                                return '<span style="color:red;">' + item.title + '</span>';
                            } else if (item.level == 1) {
                                return '<span style="color:green;">' + item.title + '</span>';
                            } else if (item.level == 2) {
                                return '<span style="color:#aaa;">' + item.title + '</span>';
                            }
                        }
                    },


                ],
                done: function () {
                    //关闭加载
                    layer.closeAll('loading');
                }
            });


            // 监听展开关闭
            treeTable.on('tree(flex)', function (data) {
                layer.msg(JSON.stringify(data));
            })
            // 监听checkbox选择
            treeTable.on('tree(box)', function (data) {
                if (o(data.elem).parents('#tree-table1').length) {
                    var text = [];
                    o(data.elem).parents('#tree-table1').find('.cbx.layui-form-checked').each(function () {
                        o(this).parents('[data-pid]').length && text.push(o(this).parents('td').next().find('span').text());
                    })
                    o(data.elem).parents('#tree-table1').prev().find('input').val(text.join(','));
                }
                layer.msg(JSON.stringify(data));
            })
            // 监听自定义
            treeTable.on('tree(add)', function (data) {
                layer.msg(JSON.stringify(data));
            })
            // 获取选中值，返回值是一个数组（定义的primary_key参数集合）
            o('.get-checked').click(function () {
                layer.msg('选中参数' + treeTable.checked(re).join(','))
            })
            // 刷新重载树表（一般在异步处理数据后刷新显示）
            o('.refresh').click(function () {
                re.data.push({"id": 50, "pid": 0, "title": "1-4"}, {"id": 51, "pid": 50, "title": "1-4-1"});
                treeTable.render(re);
            })

            o('#tree1').on('click', '[data-down]', function () {
                o(this).find('span').length && o(this).parents('.layui-unselect').find('input').val(o(this).text());
            })
            o('.layui-select-title').click(function () {
                o(this).parent().hasClass('layui-form-selected') ? o(this).next().hide() : o(this).next().show(), o(this).parent().toggleClass('layui-form-selected');
            })
            o(document).on("click", function (i) {
                !o(i.target).parent().hasClass('layui-select-title') && !o(i.target).parents('table').length && !(!o(i.target).parents('table').length && o(i.target).hasClass('layui-icon')) && o(".layui-form-select").removeClass("layui-form-selected").find('.layui-anim').hide();
            })
        })
    </script>

@endsection()

